<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉菜单</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#menu{
				margin:20px,auto 0;
				width: 200px;
				border: 1px solid #ccc;
				
			}
			#menu span{
				background: gray;
				/*充满menu的宽度，行内元素转化为行内块级元素*/
				display: block;
				cursor: pointer;
			}
			
			
		</style>
	</head>
	<body>
		<ul id="menu">
			<li> <span id="tbl_menu">web前端</span> 
				<ul>
					<li>javascript</li>
					<li>DIV+CSS</li>
					<li>jquert</li>
				</ul>
			</li>
			<li>后台脚本
				<ul>
					<li>PHP</li>
					<li>javascript</li>
				</ul>
			</li>
			<li>
				<ul>
					<li></li>
				</ul>
			</li>
		</ul>
		<script type="text/javascript">
			//获取到一级菜单对象   获取二级菜单对象  绑定事件   点击的开关时间 flag  二级菜单的显示状态更改
			var ospan=document.querySelectorAll("#menu span");
			var oUls=document.querySelectorAll("#menu li ul");
			for(var i in ospan){
				ospan[i].index=i;
				ospan[i].onclick=function{
					var u=oUls[this.index];
					if (u.style.display == "block") {
						u.style.display = "none";
					} else{
						u.style.display = "block";
					}
					
				}
			}
			
			for(var i in )
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			// 获取一级菜单对象
/*  var topLevelMenu = document.getElementById("tbl_menu");
    
    // 获取二级菜单对象
    var subMenu = topLevelMenu.nextElementSibling;
    
    // 初始状态下隐藏二级菜单
    subMenu.style.display = "none";
    
    // 绑定点击事件
    topLevelMenu.addEventListener("click", function() {
        // 切换二级菜单的显示状态
        if (subMenu.style.display === "none") {
            subMenu.style.display = "block";
        } else {
            subMenu.style.display = "none";
        }
    });
*/  			
		</script>
	</body>
</html>
